<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Filament Group Lab</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/fg.menu.js"></script>
    
    <link type="text/css" media="screen" rel="stylesheet" href="css/fg.menu.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/cust-smooth/jquery-ui-1.8.7.custom.css" />
    
    <!-- styles for this example page only -->
<!--
	#menuLog { font-size:1.4em; margin:20px; }
	a.fg-button { float:left;  }
	button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
	
	.fg-button-icon-left { padding-left: 2.1em; }
	.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

-->
	<style type="text/css">
	body { font-size:62.5%; margin:0; padding:0; }
	.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
	
	.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
	.fg-button-icon-right { padding-right: 2.1em; }
	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
	
	.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
	</style>

    <script type="text/javascript">    
    $(function(){
    	// BUTTONS
    	$('.fg-button').hover(
    		function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
    		function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
    	);
    	
    	// MENUS    	
		$('#flat').menu({ 
			content: $('#flat').next().html(), // grab content from this page
			showSpeed: 100 
		});		
    });
    </script>
</head>

<body>

<p id="menuLog">You chose: <span id="menuSelection"></span></p>

<a id="flat" href="#" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>
<div class="hidden">
<ul>
	<li><a href="#">Google</a></li>
	<li><a href="#">Yahoo</a></li>
	<li><a href="#">MSN</a></li>
	<li><a href="#">Ask</a></li>
	<li><a href="#">AOL</a></li>
</ul>
</div>
<div>Hello, darling !!!</div>
</body>
</html>
